<script setup>
import { ref } from 'vue'
import {
  User,
  Setting,
  House,
  Connection, Calendar, Money, PieChart,


} from '@element-plus/icons-vue'

const isCollapse = ref(true)
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<template>
  <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :value="false">展开</el-radio-button>
    <el-radio-button :value="true">隐藏</el-radio-button>
  </el-radio-group>
  <el-menu
      default-active="/main/home"
      class="el-menu-vertical-demo"
      router="true"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
  >
    <el-menu-item index="/main/home">
      <el-icon><House /></el-icon>
      <template #title>首页</template>
    </el-menu-item>



    <el-sub-menu index="my">
      <template #title>
        <el-icon><User /></el-icon>
        <span>我的</span>
      </template>
      <el-menu-item-group>
        <el-sub-menu index="mycheck">
          <template #title><span>我的审批</span></template>
          <el-menu-item index="/my/mycheck/check">我的审批</el-menu-item>
          <el-menu-item index="/my/mycheck/checkdone">我的已办</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/my/mynews">个人信息</el-menu-item>
        <el-menu-item index="/my/documentselect">单据</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="manageman">
      <template #title>
        <el-icon><Connection /></el-icon>
        <span>人事管理</span>
      </template>
      <el-menu-item-group>
        <el-sub-menu index="shanggang">
          <template #title><span>上岗管理</span></template>
          <el-menu-item index="/manageman/shanggang/contractors">合同工</el-menu-item>
          <el-menu-item index="/manageman/shanggang/external">外聘人员</el-menu-item>
          <el-menu-item index="/manageman/shanggang/excontract">外聘人员合同</el-menu-item>
          <el-menu-item index="/manageman/shanggang/contract">合同备档</el-menu-item>
          <el-menu-item index="/manageman/shanggang/holiday">节假日配置</el-menu-item>
          <el-menu-item index="/manageman/shanggang/door">门卡配置</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="chujing">
          <template #title><span>出境管理</span></template>
          <el-menu-item index="/manageman/chujing/documents">证件归还</el-menu-item>
          <el-menu-item index="/manageman/chujing/sumtime">汇总时间设置</el-menu-item>
          <el-menu-item index="/manageman/chujing/relatives">直属亲人备档</el-menu-item>
          <el-menu-item index="/manageman/chujing/giftman">礼品管理</el-menu-item>
          <el-menu-item index="/manageman/chujing/signature">电子签章申请</el-menu-item>
          <el-menu-item index="/manageman/chujing/out">出境申请</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="chuqin">
          <template #title><span>出勤管理</span></template>
          <el-menu-item index="/manageman/chuqin/attendance">出勤汇总</el-menu-item>
          <el-menu-item index="/manageman/chuqin/goout">出差申请</el-menu-item>
          <el-menu-item index="/manageman/chuqin/overtime">加班申请</el-menu-item>
          <el-menu-item index="/manageman/chuqin/police">出警申请</el-menu-item>
          <el-menu-item index="/manageman/chuqin/leave">请假申请</el-menu-item>
          <el-menu-item index="/manageman/chuqin/cancelleave">销假申请</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="wage">
          <template #title><span>工资管理</span></template>
          <el-menu-item index="/manageman/wage/wagesum">工资统计</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="jiaojie">
          <template #title><span>交接管理</span></template>
          <el-menu-item index="/manageman/jiaojie/jiaojieman">交接管理</el-menu-item>
          <el-menu-item index="/manageman/jiaojie/ligangman">离岗管理</el-menu-item>
        </el-sub-menu>

      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="dailyman">
      <template #title>
        <el-icon><Calendar /></el-icon>
        <span>会议管理</span>
      </template>
      <el-menu-item-group>

          <el-menu-item index="/dailyman/meetingman/bookingman">会议室信息维护</el-menu-item>
          <el-menu-item index="/dailyman/meetingman/meetingbook">会议预约</el-menu-item>
          <el-menu-item index="/dailyman/meetingman/meetingman">预约管理</el-menu-item>
          <el-menu-item index="/dailyman/meetingman/meetingser">会议纪要</el-menu-item>
          <el-menu-item index="/dailyman/meetingman/meetingsign">会议招待</el-menu-item>
          <el-menu-item index="/dailyman/meetingman/meetingrec">会议招待管理</el-menu-item>


      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="account">
      <template #title>
        <el-icon><Money /></el-icon>
        <span>报销补助</span>
      </template>
      <el-menu-item-group>
        <el-sub-menu index="manage">
          <template #title><span>报销管理</span></template>
          <el-menu-item index="/account/manage/richang">日常报销申请</el-menu-item>
          <el-menu-item index="/account/manage/chuchai">出差报销申请</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="Butieman">
          <template #title><span>补贴管理</span></template>
          <el-menu-item index="/account/Butieman/pay">支付申请</el-menu-item>
          <el-menu-item index="/account/Butieman/overtimepay">员工加班费补助申请</el-menu-item>
          <el-menu-item index="/account/Butieman/gold">慰问金申请</el-menu-item>
          <el-menu-item index="/account/Butieman/externalstaff">外聘人员费申请</el-menu-item>
          <el-menu-item index="/account/Butieman/paylist">支付申请列表</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/account/monthaccount">招待费月统计</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="sum">
      <template #title>
        <el-icon><PieChart /></el-icon>
        <span>汇总分析</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/sum/appearsum">出勤汇总分析</el-menu-item>
        <el-sub-menu index="/sum/repairsum">
          <template #title><span>维修汇总</span></template>
          <el-menu-item index="/sum/repairsum/maintenanceanalysis">维修汇总分析</el-menu-item>
          <el-menu-item index="/sum/repairsum/maintenancelist">维修汇总列表</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/sum/foodsum">伙食汇总</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>